<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1：v-model双向绑定</h1>
            <h3>我们可以使用这个指令在表单的各种DOM元素进行双向的数据绑定。
                它会根据我们的控件类型自动更新元素。同时，它还会忽略所有表
                单元素中的value，checked，selected等元素
            </h3>
            <h3>1.单行文本框</h3>
            <input type="text" v-model="singleText">{{singleText}}
            <h3>2.多行文本框</h3>
            <textarea v-model="multiText"></textarea>{{multiText}}
            <h3>3.单选框</h3>
                <h4>单选框在实际中是不能单独使用的，一般是两个及以上，可以
                    设置一个公有的v-model变量，那么就可以实现radiogroup的效果了
                </h4>
                <input type="radio" value="A" v-model="radioValue">A.play
                <input type="radio" value="B" v-model="radioValue">B.sleep
                <input type="radio" value="C" v-model="radioValue">C.study
                <input type="radio" value="D" v-model="radioValue">D.work
                {{radioValue}}
            <h3>4.单个复选框：通常用来判断T或F</h3>
                <input type="checkbox" v-model="toggleValue">是否玩{{toggleValue}}
            <h3>5.多个复选框：v-model接受数组类型的变量</h3>
                <input type="checkbox" value="高风险" v-model="checkedValue">A.股票
                <input type="checkbox" value="低风险" v-model="checkedValue">B.彩票
                <input type="checkbox" value="无风险" v-model="checkedValue">C.(～o￣3￣)～
                <input type="checkbox" value="中风险" v-model="checkedValue">D.work
                <!-- {{checkedValue}} -->
                {{checkedValue.join(',')}}

            <h3>6.单项下拉选择框</h3>
                <select v-model="singleSelect">
                    <option value="阿斯顿">阿斯顿</option>
                    <option value="啊">啊</option>
                    <option value="方法">方法</option>
                    <option value="阿松大">阿松大</option>
                    <option value=士夫"">士夫</option>
                    <option value="士大夫">士大夫</option>
                    <option value="反对">反对</option>
                    <option value="士大夫十分">士大夫十分</option>
                </select>    
                {{singleSelect}}

            <h3>6.多项下拉选择框</h3>
                <select multiple v-model="multiSelect">
                    <option value="阿斯顿">阿斯顿</option>
                    <option value="啊">啊</option>
                    <option value="方法">方法</option>
                    <option value="阿松大">阿松大</option>
                    <option value="士夫">士夫</option>
                    <option value="士大夫">士大夫</option>
                    <option value="反对">反对</option>
                    <option value="士大夫十分">士大夫十分</option>
                </select>    
                <!-- {{multiSelect}} -->
                {{multiSelect.join(',')}}
                <!-- 选择时要多个按用Ctrl -->

        <h1>知识点2：v-model修饰符</h1>
                <h3>1.lazy修饰符 v-model在每次input触发后将输入框的值与数据进行同步，添加
                    lazy修饰符后，转变为change事件同步(失去焦点后change)
                </h3>
                <input type="text" v-model.lazy="text">{{text}}
                <h3>2.number修饰符：可以将用户输入的值转化成数字型</h3>
                <input type="text" v-model="num">{{num+1}}
                <h3>3.trim修饰符：可以自动过滤掉前后面的空格(文本框)</h3>
                <input type="text" v-model.trim="text">{{text+" 你好   萨达 "+text}}
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                singleText:'',
                multiText:'',
                radioValue:'',
                toggleValue:false,
                checkedValue:[],
                singleSelect:'',
                multiSelect:[],
                text:'',
                num:1,
            }
        },

    }).mount("#app")

</script>